import React from 'react';
import { Breadcrumb as AntBreadcrumb } from 'antd';
import { Application } from '../core';
import { HomeOutlined } from '@ant-design/icons';
import { ModelStore, ViewFactory } from '../model';

/**
 * Breadcrumb Component - Shows the current navigation path
 */
const Breadcrumb: React.FC = () => {
  const app = Application.getInstance();
  const modelStore = ModelStore.getInstance();
  const viewFactory = ViewFactory.getInstance();
  const activeWindow = app.activeWindow;
  const activeFrame = activeWindow?.activeFrame;
  const activeView = activeFrame?.view;
    if (!activeView) {
    return (
      <AntBreadcrumb className="mini-xaf-breadcrumb" style={{ margin: '16px 0' }}>
        <AntBreadcrumb.Item>
          <a><HomeOutlined /></a>
        </AntBreadcrumb.Item>
        <AntBreadcrumb.Item>Home</AntBreadcrumb.Item>
      </AntBreadcrumb>
    );
  }

  // Find the navigation path for the active view
  const findNavigationPath = () => {
    const navigation = modelStore.navigation;
    if (!navigation || !navigation.items) {
      return null;
    }

    // Look for the navigation item that corresponds to the active view
    for (const group of navigation.items) {
      if (group.items) {
        for (const item of group.items) {
          if (item.viewName === activeView.name) {
            return { group, item };
          }
        }
      }
    }
    
    return null;
  };

  const navigationPath = findNavigationPath();
  if (!navigationPath) {
    return (
      <AntBreadcrumb className="mini-xaf-breadcrumb" style={{ margin: '16px 0' }}>
        <AntBreadcrumb.Item>
          <a><HomeOutlined /></a>
        </AntBreadcrumb.Item>
        <AntBreadcrumb.Item>{activeView.caption}</AntBreadcrumb.Item>
      </AntBreadcrumb>
    );
  }
  const { group, item } = navigationPath;

  return (
    <AntBreadcrumb className="mini-xaf-breadcrumb" style={{ margin: '16px 0' }}>
      <AntBreadcrumb.Item>
        <a onClick={() => {
          // Navigate to home/dashboard
          if (app.activeWindow) {
            // Clear all frames except the main one
            while (app.activeWindow.frames.length > 1) {
              app.activeWindow.frames.pop();
            }
          }
        }} style={{ cursor: 'pointer' }}>
          <HomeOutlined />
        </a>
      </AntBreadcrumb.Item>
      <AntBreadcrumb.Item>
        <a onClick={() => {
          // Open the group in the navigation
          // Try to find a default view for this group
          if (group.items && group.items.length > 0 && app.activeWindow) {
            const firstItem = group.items[0];
            const view = viewFactory.createView(firstItem.viewName);
            if (view) {
              app.activeWindow.navigate(view);
            }
          }
        }} style={{ cursor: 'pointer' }}>
          {group.displayName}
        </a>
      </AntBreadcrumb.Item>
      <AntBreadcrumb.Item>{item.displayName}</AntBreadcrumb.Item>
    </AntBreadcrumb>
  );
};

export default Breadcrumb;
